<template>
    <section class="bottom-pop-box">
      <van-popup
        v-model="isShowPop"
        position="bottom"
        @click-overlay="closePop">
        <div class="title text-c pdlr15 line-bottom bgcFFF">
          {{titleText}}
          <i @click="closePop" class="iconfont iconcha" :class="iconleft ? 'fll' :' flr'"></i>
        </div>
        <slot></slot>
        <div class="btn pdlr15 text-c" v-if="isPay">
          <span @click="payOrder">{{closeText}}</span>
        </div>
        <div class="btn pdlr15 text-c" v-if="!isPay">
          <span @click="closePop">{{closeText}}</span>
        </div>
      </van-popup>
    </section>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        show:false,
      }
    },
    created(){
      this.$nextTick(function(){
//        this.show = this.isShowPop
//        console.log(this.isShowPop,'000');
        if(this.bgc)
          $('.bottom-pop-box .van-popup--bottom').css('background',this.bgc);
      })

    },
    props:['isShowPop','titleText','closeText','iconleft','bgc','isPay'],
    methods: {
      closePop(){
        this.isShowPop = false;
        this.$emit('sendcloseval',{show:false})
      },
      payOrder(){
        this.isShowPop = false;
        this.$emit('send-pay',{pay:true})
      },
    },
  }
</script>

<style lang="scss" scoped>
  @import "../assets/css/base";

  .bottom-pop-box{
    height:auto;

    .van-popup--bottom{

      .title{
        width: 100%;
        height: 44px;
        line-height: 44px;
        font-size: 17px;
        color: #7A7B82;
      }

      .btn{
        /*position: fixed;*/
        /*bottom:0;*/
        /*left:0;*/
        /*background-color: #F7F7F7;*/
        /*height: 57px;*/
        width: 100%;
        margin-bottom: 12px;
        z-index:10;

        span{
          background: -webkit-linear-gradient(right,#A182FF,#7E82F6);
          display: inline-block;
          border-radius:22px;
          color: #fff;
          font-size: 15px;
          line-height: 44px;
          width: 100%;
        }
      }
    }

  }

</style>
